<template>
  <div class="about">
    <div>
      <h2>tailwindcss</h2>
      <div>
        <div
          class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl"
        >
          <div class="md:flex">
            <div class="md:flex-shrink-0">
              <img
                class="h-48 w-full object-cover md:h-full md:w-48"
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-01-20%2F5a62efe528ab5.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617351016&t=31e3a2f786edbb8d0d1c73d14fc5c68e"
                alt="Man looking at item at a store"
              />
            </div>
            <div class="p-8">
              <div
                class="uppercase tracking-wide text-sm text-indigo-500 font-semibold"
              >
                Case study
              </div>
              <a
                href="#"
                class="block mt-1 text-lg leading-tight font-medium text-black hover:underline"
                >Finding customers for your new business</a
              >
              <p class="mt-2 text-gray-500">
                Getting a new business off the ground is a lot of hard work.
                Here are five ideas you can use to find your first customers.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div>
      <h2 class="text-gray-900 leading-tight">element-ui</h2>
      <div>
        <el-image
          class="h-20"
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-01-20%2F5a62efe528ab5.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617351016&t=31e3a2f786edbb8d0d1c73d14fc5c68e"
        ></el-image>
        <el-button type="primary">按钮</el-button>
      </div>
    </div>

    <div>
      <h2>dayjs</h2>
      {{ time }}
    </div>

    <div>
      <h2>vue-echarts</h2>
      <v-chart class="w-full h-80" :option="option" />
    </div>

    <div>
      <h2>axios</h2>
      <div>
        {{ axios }}
      </div>
    </div>

    <div>
      <h2>lodash([0,1,2,3])）</h2>
      <div>max is : {{ max }}</div>
    </div>

    <div>
      <h2>vDraggable</h2>
      <div>
        <vDraggable v-model="list">
          <transition-group>
            <div
              class="w-10 border border-gray-500 rounded-sm ml-4"
              v-for="element in list"
              :key="element"
            >
              {{ element }}
            </div>
          </transition-group>
        </vDraggable>
      </div>
    </div>

    <div>
      <h2>d3</h2>
      <div id="d3"></div>
    </div>

    <div>
      <h2>stompjs</h2>
      <div>{{ stompjsText }}</div>
    </div>

    <div>
      <h2>vue-svg-loader</h2>
      <bell></bell>
    </div>

    <div id="demo-tiger">
      <h2>vue-svg-pan-zoom</h2>
      <bell></bell>
    </div>

    <div>
      <h2>VueGridLayout</h2>
      <div>
        <grid-layout
          :layout.sync="layout"
          :col-num="12"
          :row-height="30"
          :is-draggable="true"
          :is-resizable="true"
          :is-mirrored="false"
          :vertical-compact="true"
          :margin="[10, 10]"
          :use-css-transforms="true"
        >
          <grid-item
            v-for="item in layout"
            :x="item.x"
            :y="item.y"
            :w="item.w"
            :h="item.h"
            :i="item.i"
            :key="item.i"
            class="bg-gray-200"
          >
            {{ item.i }}
          </grid-item>
        </grid-layout>
      </div>
    </div>

    <div>
      <h2>导出excel</h2>
      <el-button @click="exportXLSX">导出excel</el-button>

      <el-table id="my-table-id" :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </div>

    <div>
      <h2>fabric</h2>
      <canvas
        width="400"
        height="400"
        id="c"
        style="border: 1px solid #ccc"
      ></canvas>
    </div>

    <div>
      <h2>fabric-extensions</h2>
      <canvas
        width="400"
        height="400"
        id="ce"
        style="border: 1px solid #ccc"
      ></canvas>
    </div>

    <div>
      <h2>VueUse</h2>
      <div>鼠标位置：(x: {{ vueUse.x }}, y: {{ vueUse.y }})</div>
    </div>

    <div>
      <h2>Tween</h2>
      <div>{{ tweenNum }}</div>
    </div>

    <div>
      <h2>point-in-polygon([[ 1, 1 ], [ 1, 2 ], [ 2, 2 ], [ 2, 1 ]])</h2>
      <div>
        <div>点[1.5, 1.5]: {{ ii1 }}</div>
        <div>点[1, 2]: {{ ii2 }}</div>
        <div>点[100000, 10000]: {{ ii3 }}</div>
      </div>
    </div>

    <div style="height: 200px">
      <h2>GSAP</h2>

      <div
        id="GSAP"
        style="width: 10px; height: 10px; background-color: gray"
      ></div>
    </div>

    <div id="html2canvas">
      <h2>html2canvas</h2>
      <div><el-button @click="html2canvas">截图</el-button></div>
    </div>
  </div>
</template>

<script>
import bell from "@/assets/bell.svg";
import { fabric } from "fabric";
import {
  polylineControls,
  canvasCoverBackground,
  icon,
} from "@yassidev/fabric-extensions";
import * as mdi from "@mdi/js";

import VueGridLayout from "vue-grid-layout";

import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart from "vue-echarts";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);

import vDraggable from "vuedraggable";
import * as XLSX from "xlsx";
import * as d3 from "d3";

import dayjs from "dayjs";
import axios from "axios";
import { max, kebabCase } from "lodash";

import Stompjs from "stompjs";

import { useMouse } from "@vueuse/core";

import html2canvas from "html2canvas";
import classifyPoint from "robust-point-in-polygon";

import TWEEN from "@tweenjs/tween.js";

import gsap from "gsap";

export default {
  components: {
    VChart,
    vDraggable,
    bell,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
  },
  data() {
    return {
      time: dayjs("2022-07-06 20:39:00"),
      option: {
        title: {
          text: "Traffic Sources",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: [
            "Direct",
            "Email",
            "Ad Networks",
            "Video Ads",
            "Search Engines",
          ],
        },
        series: [
          {
            name: "Traffic Sources",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [
              { value: 335, name: "Direct" },
              { value: 310, name: "Email" },
              { value: 234, name: "Ad Networks" },
              { value: 135, name: "Video Ads" },
              { value: 1548, name: "Search Engines" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      axios: null,
      max: 0,
      list: [0, 1, 2, 3, 4],
      stompjsText: "",
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: "0" },
        { x: 2, y: 0, w: 2, h: 4, i: "1" },
        { x: 4, y: 0, w: 2, h: 5, i: "2" },
        { x: 6, y: 0, w: 2, h: 3, i: "3" },
        { x: 8, y: 0, w: 2, h: 3, i: "4" },
        { x: 10, y: 0, w: 2, h: 3, i: "5" },
        { x: 0, y: 5, w: 2, h: 5, i: "6" },
        { x: 2, y: 5, w: 2, h: 5, i: "7" },
        { x: 4, y: 5, w: 2, h: 5, i: "8" },
        { x: 6, y: 3, w: 2, h: 4, i: "9" },
        { x: 8, y: 4, w: 2, h: 4, i: "10" },
        { x: 10, y: 4, w: 2, h: 4, i: "11" },
        { x: 0, y: 10, w: 2, h: 5, i: "12" },
        { x: 2, y: 10, w: 2, h: 5, i: "13" },
        { x: 4, y: 8, w: 2, h: 4, i: "14" },
        { x: 6, y: 8, w: 2, h: 4, i: "15" },
        { x: 8, y: 10, w: 2, h: 5, i: "16" },
        { x: 10, y: 4, w: 2, h: 2, i: "17" },
        { x: 0, y: 9, w: 2, h: 3, i: "18" },
        { x: 2, y: 6, w: 2, h: 2, i: "19" },
      ],
      vueUse: {
        x: 0,
        y: 0,
      },
      ii1: 0,
      ii2: 0,
      ii3: 0,
      tweenNum: 0,
    };
  },
  mounted() {
    this.axios = axios;

    this.max = max([0, 1, 2, 3]);

    this.d3test();
    this.stompjsTest();
    this.fabric();
    this.vueUseTest();
    this.isInPolyon();
    this.tweenTest();
    this.gsapTest();
  },
  methods: {
    gsapTest() {
      const tl = gsap.timeline();
      tl.add(
        gsap.to("#GSAP", {
          duration: 1,
          delay: 1,
          x: 500,
        })
      );
      tl.to("#GSAP", {
        duration: 1,
        y: 50,
        width: 50,
        height: 50,
      });
    },
    tweenTest() {
      function animate(time) {
        requestAnimationFrame(animate);
        TWEEN.update(time);
      }
      requestAnimationFrame(animate);

      new TWEEN.Tween({
        number: 0,
      })
        .to({ number: 10000 }, 5000)
        .onUpdate((tween) => {
          this.tweenNum = parseInt(tween.number);
        })
        .start();

      animate();
    },
    d3test() {
      d3.select("#d3").append("span").text("d3 测试");
    },
    stompjsTest() {
      this.stompjsText = "尝试连接到: ws://localhost:8080";
      Stompjs.client("ws://localhost:8080").connect(
        () => {
          this.stompjsText += " 成功";
        },
        () => {
          this.stompjsText += " 失败";
        }
      );
    },
    vueUseTest() {
      const { x, y } = useMouse();
      this.vueUse = {
        x,
        y,
      };
    },
    exportXLSX() {
      // Acquire Data (reference to the HTML table)
      var table_elt = document.getElementById("my-table-id");
      console.log("XLSX :>> ", XLSX);
      // Extract Data (create a workbook object from the table)
      var workbook = XLSX.utils.table_to_book(table_elt);

      // Process Data (add a new row)
      var ws = workbook.Sheets["Sheet1"];
      XLSX.utils.sheet_add_aoa(ws, [], {
        origin: -1,
      });

      // Package and Release Data (`writeFile` tries to write and save an XLSB file)
      XLSX.writeFile(workbook, "Report.xlsx");
    },
    fabric() {
      canvasCoverBackground(fabric);
      polylineControls(fabric);
      console.log(
        "%c [ icons ]: ",
        "color: #bf2c9f; background: pink; font-size: 13px;",
        icon
      );
      icon(fabric);

      fabric.util.registerIconLibrary("mdi", () => {
        return Object.entries(mdi).reduce((all, [key, value]) => {
          const normalized = kebabCase(key.replace(/^mdi/, ""));
          all[normalized] = value;
          return all;
        }, {});
      });

      const canvas = new fabric.Canvas("c"); // 这里传入的是canvas的id

      const object = new fabric.Icon({
        iconName: "emoticon-happy-outline",
        iconLibrary: "mdi", // unnecessary here as there is only one library
        width: 100,
        height: 100,
        x: 10,
        y: 10,
      });

      canvas.add(object);

      // 创建一个长方形
      const rect = new fabric.Rect({
        top: 30, // 距离容器顶部 30px
        left: 30, // 距离容器左侧 30px
        width: 100, // 宽 100px
        height: 60, // 高 60px
        fill: "red", // 填充 红色
      });

      // 在canvas画布中加入矩形（rect）。add是“添加”的意思
      canvas.add(rect);

      const polyline = new fabric.Polyline(
        [
          { x: 200, y: 10 },
          { x: 250, y: 50 },
          {
            x: 250,
            y: 180,
          },
          {
            x: 150,
            y: 180,
          },
          {
            x: 150,
            y: 50,
          },
          {
            x: 200,
            y: 10,
          },
        ],
        {
          fill: "green",
        }
      );
      canvas.add(polyline);
    },
    html2canvas() {
      html2canvas(document.body).then(function (canvas) {
        document.getElementById("html2canvas").appendChild(canvas);
      });
    },
    isInPolyon() {
      const polygon = [
        [1, 1],
        [1, 2],
        [2, 2],
        [2, 1],
      ];
      let ii1 = classifyPoint(polygon, [1.5, 1.5]);
      let ii2 = classifyPoint(polygon, [1, 2]);
      let ii3 = classifyPoint(polygon, [100000, 10000]);
      this.ii1 = ii1;
      this.ii2 = ii2;
      this.ii3 = ii3;
    },
  },
};
</script>

<style scoped>
.about {
  @apply text-left p-5;
}

.about > div {
  @apply rounded-xl shadow-md p-4 mb-5 hover:shadow-xl;
}

h2 {
  @apply text-5xl mb-4;
}
</style>
